<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          {{ pageName }}
        </p>
        <div slot="extra">
          <!-- <Button icon="md-add" type="primary" @click="addModdel">添加</Button> -->
          <Button icon="md-refresh" @click="getadministratorList">刷新</Button>
        </div>
        <Row
          class="margin-bottom-10"
          type="flex"
          justify="space-between"
          :gutter="24"
        >
          <Col :span="12">
            <Row :gutter="16" type="flex">
              <Col>
                <Input
                  v-model="search.searchKey"
                  placeholder="请输入要查找的用户名"
                ></Input>
              </Col>
              <Col>
                <Button
                  icon="ios-search"
                  type="primary"
                  @click="savesearch"
                  style="margin-right: 10px"
                  >查询</Button
                >
                <Button @click="clearSearch">查看全部</Button>
              </Col>
            </Row>
          </Col>
        </Row>
        <Table
          stripe
          border
          :data="administratorObj.list"
          :loading="administratorObj.loading"
          :columns="administratorObj.columns"
        >
          <template slot-scope="{ row, index }" slot="roleInfoList">
            <div style="display: flex">
              <div
                style="padding: 5px"
                v-for="(item, index1) in row.roleInfoList"
                :key="index1"
              >
                {{ item.name }}
              </div>
            </div>
          </template>
        </Table>
        <div class="pageWrap">
          <Page
            :total="administratorObj.count"
            :page-size="administratorObj.pageSize"
            show-total
            :current.sync="administratorObj.current"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-sizer
            show-elevator
          ></Page>
        </div>
      </Card>
    </Row>
    <Modal
      v-model="administratorModal"
      :title="administratorObj.title"
      :mask-closable="false"
      :closable="false"
    >
      <Form
        :model="administratorForm"
        :label-width="120"
        ref="administratorForm"
        :rules="ruleValidate"
      >
        <FormItem label="用户名" prop="userName">
          <Input
            v-model="administratorForm.userName"
            placeholder="建议姓氏的全拼加名字的首字母组成用户名"
          ></Input>
        </FormItem>
        <FormItem label="姓名" prop="name">
          <Input v-model="administratorForm.name"></Input>
        </FormItem>
        <FormItem label="手机号码" prop="phone">
          <Input v-model="administratorForm.phone"></Input>
        </FormItem>
        <FormItem label="身份证号" prop="identityCard">
          <Input v-model="administratorForm.identityCard"></Input>
        </FormItem>
        <FormItem label="性别" prop="sex">
          <RadioGroup v-model="administratorForm.sex">
            <Radio :label="1">男</Radio>
            <Radio :label="2">女</Radio>
            <!-- <Radio label="2">业务员</Radio> -->
            <!-- <Radio label="3">副领导</Radio> -->
            <!-- <Radio label="4">领导</Radio> -->
          </RadioGroup>
        </FormItem>
        <FormItem label="住址" prop="address">
          <Input v-model="administratorForm.address"></Input>
        </FormItem>
        <!-- <FormItem label="职能" prop="position">
          <RadioGroup v-model="administratorForm.position">
            <Radio label="驾驶员">驾驶员</Radio>
            <Radio label="志愿者">志愿者</Radio>
            <Radio label="政府人员">政府人员</Radio>
          </RadioGroup>
        </FormItem> -->
        <!-- <FormItem label="部门" prop="orgList">
          <Select
            v-model="administratorForm.orgList"
            style="width: 100%"
            filterable
            ref="select2"
            @on-open-change="clearfilterable2"
          >
            <Option
              v-for="item in detSelectList"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem> -->
        <FormItem label="角色" prop="roleIDs">
          <Select
            v-model="administratorForm.roleList"
            multiple
            style="width: 100%"
          >
            <Option v-for="item in areaCodes" :value="item.id" :key="item.id">{{
              item.name
            }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <!-- <span>
          <Button
            type="primary"
            
            @click="saveadministrator"
            v-if="administratorForm.id"
            >保存</Button
          >
          <Button type="primary"  @click="addadministrator" v-else
            >添加</Button
          >
        </span> -->
        <Button
          
          @click="formcancel('administratorForm', 'administratorModal')"
          >关闭</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from "axios";
import util from "@/libs/util";
import imgUpLoad from "@/views/my-components/img-upLoad/img-upLoad";
import Editor from "@/views/my-components/quill/quill";
import { mapGetters } from "vuex";
let administratorForm = {
  name: "", //姓名
  sex: "", //1男2女
  phone: "", //手机
  identityCard: "", //身份证
  address: "", //家庭住址
  controlUserItudeStatus: "", //无（非直接与病例关联人员）密接 次密接 重点人群 一般接触人员 病例 时空伴随者 重点关注人员
  isolation: "", //隔离点
};

let search = {
  searchKey: "",
};
export default {
  name: "administrator",
  components: {
    imgUpLoad,
    Editor,
  },
  computed: {
    pageName() {
      return util.getCurrentTitle(this);
    },
  },
  data() {
    return {
      CallerList: [],
      spinShow: false,
      listStyle: {
        width: "430px",
        height: "300px",
      },
      showmatter: false,
      departmentList: [],
      matterParams: {
        title: "",
        userID: "",
        departmentID: "",
      },
      matterData: [],
      matterExist: [],
      isAdmin: false,
      detSelectList: [],
      areaCodes: [],
      showDepartment: true,
      administratorModal: false,
      administratorForm,
      administratorObj: {
        list: [],
        columns: [
          //   {
          //     title: "用户名",
          //     align: "center",
          //     key: "phone",
          //   },
          {
            title: "姓名",
            align: "center",
            key: "name",
          },
          {
            title: "性别",
            align: "center",
            key: "sex",
            render: (h, params) => {
              return h("div", [
                // h("Icon", {
                //   class: "demo-spin-icon-load",
                //   props: {
                //     type: "load-c",
                //     size: 60,
                //   },
                // }),
                h(
                  "div",
                  { style: {} },
                  params.row.sex == 1 ? "男" : params.row.sex == 2 ? "女" : "未知"
                ),
              ]);
            },
          },
          {
            title: "联系电话",
            align: "center",
            key: "phone",
          },
          {
            title: "身份证",
            align: "center",
            width: 120,
            key: "identityCard",
          },
          {
            title: "住址",
            align: "center",
            key: "address",
          },
          {
            title: "防控等级",
            align: "center",
            key: "controlUserItudeStatusText",
            width: 300,
          },
          {
            title: "隔离点",
            align: "center",
            key: "isolation",
          },
          // {
          //   title: "用户类型",
          //   key: "userType"
          // },
          //   {
          //     title: "操作",
          //     align: "center",
          //     minWidth: 220,
          //     key: "action",
          //     render: (h, params) => {
          //       return h("div", [
          //         // h(
          //         //   "Button",
          //         //   {
          //         //     props: {
          //         //       
          //         //       type: "warning",
          //         //     },
          //         //     style: {
          //         //       marginRight: "10px",
          //         //     },
          //         //     on: {
          //         //       click: () => {
          //         //         this.matterButton(params.row);
          //         //       },
          //         //     },
          //         //   },
          //         //   "事项配置"
          //         // ),
          //         h(
          //           "Button",
          //           {
          //             props: {
          //               
          //               type: "primary",
          //             },
          //             style: {
          //               marginRight: "10px",
          //             },
          //             on: {
          //               click: () => {
          //                 this.getadministrator(params.row.id);
          //               },
          //             },
          //           },
          //           "查看"
          //         ),
          //         h(
          //           "Poptip",
          //           {
          //             props: {
          //               confirm: true,
          //               title: "您确认删除该信息？",
          //               transfer: true,
          //             },
          //             on: {
          //               "on-ok": () => {
          //                 this.deladministrator(params.row.id);
          //               },
          //             },
          //           },
          //           [
          //             h(
          //               "Button",
          //               {
          //                 props: {
          //                   type: "error",
          //                   
          //                 },
          //                 style: {
          //                   display: "none",
          //                 },
          //               },
          //               "删除"
          //             ),
          //           ]
          //         ),
          //       ]);
          //     },
          //   },
        ],
        title: "",
        current: 1,
        count: 0,
        loading: true,
        pageSize: 10,
      },
      ruleValidate: {
        userType: [
          {
            required: true,
            message: "用户类型必选一种",
            trigger: "blur",
          },
        ],
        identityName: [
          {
            required: true,
            message: "身份证名字不能为空",
            trigger: "blur",
          },
        ],
        identity: [
          {
            required: true,
            message: "身份证号码不能为空",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "手机号码不能为空",
            trigger: "blur",
          },
        ],
      },
      search,
    };
  },
  methods: {
    clearSearch() {
      this.search.searchKey = "";
      this.savesearch();
    },
    savesearch() {
      this.administratorObj.current = 1;
      this.getadministratorList();
    },
    pageSizeChange(v) {
      this.administratorObj.pageSize = v;
      this.getadministratorList();
    },
    stateChange(v) {
      this.administratorForm.state = v;
    },
    formcancel(...params) {
      util.resetData(this, ...params);
    },
    addModdel() {
      this.administratorObj.title = "添加信息";
      this.administratorForm = Object.assign({}, administratorForm);
      //   this.administratorForm = {
      //     identity: "",
      //     identityName: "",
      //     userName: "",
      //     password: "",
      //     phone: "",
      //     name: "",
      //     userType: "",
      //     departmentID: "",
      //     isDepartmentChargePerson: false,
      //     professionNature: 0,
      //     organizationalNature: 0,
      //     windowId: "",
      //     roleIDs: [],
      //   };
      this.administratorModal = true;
    },
    //保存
    saveadministrator() {
      this.$refs.administratorForm.validate((valid) => {
        if (valid) {
          let temp = JSON.parse(JSON.stringify(this.administratorForm));
          axios.put(`/SysUser/User`, temp).then((res) => {
            if (res.success) {
              this.$Message.success("操作成功");
              this.formcancel("administratorForm", "administratorModal");
              this.getadministratorList();
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {
          this.$Message.warning("表单认证失败");
        }
      });
    },
    //添加
    addadministrator() {
      this.$refs.administratorForm.validate((valid) => {
        if (valid) {
          let temp = JSON.parse(JSON.stringify(this.administratorForm));
          axios.post(`/SysUser/User`, temp).then((res) => {
            
            if (res.success) {
              this.$Message.success("操作成功");
              this.formcancel("administratorForm", "administratorModal");
              this.getadministratorList();
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {
          this.$Message.warning("表单认证失败");
        }
      });
    },
    //分页列表
    getadministratorList() {
      // this.$store.commit("app/initSearch", {
      //   page: {
      //     current: this.administratorObj.current,
      //     pageSize: this.administratorObj.pageSize
      //   },
      //   search: this.search
      // });
      this.administratorObj.loading = true;

      axios
        .get(`/ControlUser/ControlUserInfoPage`, {
          params: {
            PageNo: this.administratorObj.current,
            PageSize: this.administratorObj.pageSize,
            name: this.search.searchKey,
          },
        })
        .then((e) => {
          
          let res = e.data;
          this.administratorObj.list = res.rows;
          this.administratorObj.count = res.totalRows;
          this.administratorObj.loading = false;
        });
    },
    //查看详情
    getadministrator(id) {
      axios.get(`/ControlUser/ControlUser/${id}`).then((res) => {
        
        let data = res.data;
        this.administratorObj.title = "查看信息";
        // this.administratorForm=data
        Object.assign(this.administratorForm, data);
        this.administratorModal = true;
      });
    },
    //删除
    deladministrator(id) {
      let data = {
        id: id,
      };
      axios.delete(`/SysUser/User`, { data: data }).then((res) => {
        
        if (res.success) {
          this.$Message.success("操作成功");
          this.getadministratorList();
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    pageChange(v) {
      this.administratorObj.current = v;
      this.getadministratorList();
    },
  },
  mounted() {
    this.getadministratorList();
  },
  created() {},
  activated() {},
};
</script>
